<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<header class="p900 flexbtw">
    <h3>在线聊天、在线客服</h3>
    <div>
        欢迎 XXX
        <a href="#">退出</a>
    </div>
</header>
<main class="m900 flexbtw">
    <aside>
        <div>张三</div>
        <div>李四</div>
        <div>王五</div>
        <div>赵六</div>
    </aside>
    <article>
        <div id="msgs">
            <div v-for=" m in msgs" :class="{recv:m.author!=user , send:m.author == user}">
                <label class="user">{{m.author}}</label>
                <span class="msg">{{m.text}}</span>
            </div>
        </div>
        <textarea placeholder="Ctrl + Center 发送" id="msg" v-model="text"></textarea>
        <div id="ops">
            <input placeholder="用户名" v-model="user">
            <button @click="connect">连接</button>
            <button @click="send">发送</button>
        </div>
    </article>
</main>
<footer>源辰公司</footer>

<script>
    var v = new Vue({
        el: "main",
        data: {
            websocket: null,
            user: "",
            text: "",
            mags: [],
        },
        methods: {
            connect() {
                this.websocket = new WebSocket("ws://127.0.0.1:8080/websocket/" + this.user);
                this.websocket.onmessage = (event) => {
                    console.info(event.data);
                    this.msgs.push(event.data);
                    this.$forceUpdate();
                }
                this.websocket.onopen = () => {
                    console.info("连接成功");
                }
                this.websocket.onclose = () => {
                    console.info("断开成功");
                }
            },
            send() {
                this.websocket.send(this.text)
            }
        }
    })
</script>
</body>
</html>


<style>
    * {
        padding: 0px;
        margin: 0px;
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }

    html, body {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    a {
        text-decoration: none;
    }

    button {
        padding: 3px 10px;
    }

    .p900 {
        padding: 0px calc((100% - 900px) / 2);
    }

    .m900 {
        width: 900px;
        margin: 0px auto;
    }

    .flexbtw {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header {
        background-color: #eee;
        flex: none;
    }

    header > h3 {
        margin: 10px 0px;
    }

    main {
        flex: auto;
        background-color: #ddd;
    }

    footer {
        flex: none;
        padding: 5px;
        text-align: center;
        background-color: #eee;
    }

    aside {
        width: 200px;
        height: 100%;
        background-color: #ccc;
        flex: none;
    }

    article {
        height: 100%;
        flex: auto;
    }

    article {
        display: flex;
        flex-direction: column;
    }

    #msgs {
        flex: auto;
        box-sizing: border-box;
        padding: 10px;
    }

    #msg {
        flex: none;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
    }

    .send > * {
        float: right;
    }

    .recv > * {
        float: left;
    }

    .send, .recv {
        clear: both;
        padding: 5px 0px;
    }

    .user, .msg {
        padding: 5px;
    }

    .msg {
        background-color: #e9e9e9;
        border-radius: 3px;
    }

    aside > div {
        text-align: center;
        padding: 10px;
        margin: 3px;
        background-color: #8c939d;
    }

    aside > div:hover {
        background-color: #8c939d55;
        cursor: pointer;
    }

    #ops {
        text-align: right;
        padding: 7px;
    }

    #ops > * {
        box-sizing: border-box;
        height: 25px;
        vertical-align: middle;
        margin: 0px 5px;
        text-align: center;
    }

    textarea {
        padding: 3px;
    }
</style>